<template>
	<view class="" style="padding-bottom: 120rpx;">
		<view class="p-30">
			<view class="card p-30" style="display: none;">
				<view class="flex-row justify-between align-center">
					<view class="gray-color">
						订单编号：{{info.order_sn}}
					</view>
					<view class="">
						<template v-if="info.status == 0">
							<u-text type="error" text="未支付"></u-text>
						</template>
						<template v-else-if="info.status == 1">
							<u-text type="primary" text="已支付"></u-text>
						</template>
						<template v-else-if="info.status == 2">
							<u-text type="success" text="已确认"></u-text>
						</template>
						<template v-else-if="info.status == 3">
							<u-text type="info" text="已完成"></u-text>
						</template>
					</view>
				</view>
				<u-line color="#eee" margin="30rpx 0"></u-line>
				<view class="flex-row">
					<u-image :src="info.image" width="150rpx" height="150rpx"></u-image>
					<view class="flex-column justify-center w-full ml-30" style="gap: 10rpx;">
						<view class="flex-row align-center justify-between" style="gap: 10rpx;">
							<view class="fw-700">{{info.title}}</view>
							<view class="flex-row">
								<u-text mode="price" :color="$u.color.primary" :text="info.pay_price"></u-text>
							</view>
						</view>
						<view class="flex-row align-center">
							<view class="tag">
								<u-tag text="卖家" size="mini" type="warning"></u-tag>
							</view>
							<view class="ml-10 small-size">{{info.seller_name}}</view>
						</view>
						<view class="flex-row align-center">
							<view class="gray-color small-size">{{$u.timeFormat(info.createtime, 'yyyy年mm月dd日')}}</view>
						</view>
					</view>
				</view>
				<u-line color="#eee" margin="30rpx 0"></u-line>
				<view class="flex-column" style="gap: 10rpx;">
					<view class="flex-row align-center justify-between small-size">
						<view class="">
							消费赠送积分
						</view>
						<view>{{info.profit}}</view>
					</view>
					<view class="flex-row align-center justify-between small-size">
						<view class="">
							技术服务费
						</view>
						<view>{{info.service_fee}}</view>
					</view>
					<!-- <view class="flex-row justify-end">
						<view class="">
							<u-button type="primary" size="mini" text="立即支付"></u-button>
						</view>
					</view> -->
				</view>
			</view>
			<view class="card p-30 flex-column" style="gap: 10rpx;">
				<view class="flex-row">
					<view>产品名称：</view>
					<view class="gray-color">{{info.title}}</view>
				</view>
				<view class="flex-row">
					<view>订单编号：</view>
					<view class="gray-color">{{info.order_sn}}</view>
				</view>
				<view class="flex-row">
					<view>下单时间：</view>
					<view class="gray-color">{{$u.timeFormat(info.createtime, 'yyyy年mm月dd日')}}</view>
				</view>
				<view class="flex-row">
					<view>买家：</view>
					<view class="gray-color">{{info.buyer_name}}</view>
				</view>
				<view class="flex-row">
					<view>买家联系方式：</view>
					<view class="gray-color">{{info.buyer_mobile}}</view>
				</view>
				<view class="flex-row">
					<view>卖家：</view>
					<view class="gray-color">{{info.seller_name}}</view>
				</view>
				<view class="flex-row">
					<view>卖家联系方式：</view>
					<view class="gray-color">{{info.seller_mobile}}</view>
				</view>
				<view class="flex-row">
					<view>支付价格：</view>
					<view class="gray-color">{{info.pay_price}}</view>
				</view>
				<view class="flex-row">
					<view>服务费：</view>
					<view class="gray-color">{{info.service_fee}}</view>
				</view>
				<view class="flex-row">
					<view>消费赠送积分：</view>
					<view class="gray-color">{{info.profit}}</view>
				</view>
			</view>
			<view class="card p-30 mt-30">
				<view class="">
					<view class="flex-row align-center justify-between" @click="actionShow = true; hideKeyboard()">
						<view class="fw-700">
							支付方式
						</view>
						<view class="">
							<u-icon name="arrow-right" :label="card ? card.name : '选择支付方式'" labelPos="left" size="24rpx"
								labelSize="24rpx"></u-icon>
						</view>
					</view>
					<view class="mt-30 flex-column" style="gap: 30rpx;" v-if="card">
						<view class="flex-row align-center">
							<view>姓名：</view>
							<view>{{card.name1}}</view>
						</view>
						<template v-if="card.type != 5">
							<view class="flex-row align-center">
								<view>账号：</view>
								<view>{{card.account}}</view>
							</view>
							<u-image @click="previewSingleImage(card.image)" :src="card.image" width="300rpx" height="300rpx"></u-image>
						</template>
						<template v-else>
							<view class="flex-row align-center">
								<view>银行名称：</view>
								<view>{{card.bank_name}}</view>
							</view>
							<view class="flex-row align-center">
								<view>银行账号：</view>
								<view>{{card.bank_account}}</view>
							</view>
						</template>
					</view>
				</view>
			</view>
			<view class="card p-30 mt-30">
				<view class="">
					<view class="flex-column">
						<view class="fw-700">
							上传支付凭证
						</view>
						<view class="mt-10 small-size price-color">
							购买订单请核对收款方与订单是否一致，如有疑问请联系助理协助。
						</view>
					</view>
					<view class="mt-30">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="1" width="300rpx" height="300rpx"></u-upload>
					</view>
				</view>
			</view>

		</view>
		<view class="submit">
			<u-button :loading="loading" @click="submit" type="primary" text="提交上传"></u-button>
		</view>

		<u-action-sheet :show="actionShow" :actions="actions" title="请选择收款方式" @close="actionShow = false"
			@select="actionSelect">
		</u-action-sheet>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		orderInfo,
		orderSubmit,
		sellerCode
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				info: {},
				fileList1: [],

				actionShow: false,
				actions: [],
				loading: false,
				card: null,
				pay_proof: "",
				card_id: 0,
				order_id: 0,
				
			}
		},
		computed: {
			...mapState([]),
		},
		onLoad(e) {
			this.order_id = e.order_id
			this.initData();
		},
		methods: {
			// 单图预览
			previewSingleImage(image) {
			  uni.previewImage({
			    urls: [image], // 需要预览的图片链接列表
			    current: 0, // 当前显示图片的索引
			    indicator: 'number', // 图片指示器样式
			    loop: false // 是否可循环预览
			  });
			},
			
			initData() {
				orderInfo({
					data: {
						order_id: this.order_id
					}
				}).then(res => {
					this.info = res
					
					sellerCode({
						data: {
							seller_id: this.info.seller_id
						}
					}).then(res => {
						this.actions = res.map(v => {
							v.name1 = v.name;
							v.name = v.type_text;
							return v
						})
						this.card = this.actions[0]
					})
				})

				
			},
			actionSelect(e) {
				this.card = e
				this.card_id = e.id
			},
			submit() {
				let vm = this;
				// if(vm.card_id == 0) {
				// 	vm.$u.toast('请选择支付方式');
				// 	return false;
				// }
				if (vm.fileList1.length == 0) {
					vm.$u.toast('请上传支付凭证');
					return false;
				}
				if (vm.fileList1.length != 0) {
					vm.pay_proof = vm.fileList1[0].url;
				}

				vm.loading = true;
				orderSubmit({
					order_id: vm.order_id,
					card_id: vm.card_id,
					pay_proof: vm.pay_proof
				}).then(res => {
					vm.$refs.uToast.show({
						type: 'success',
						message: '上传成功',
						complete() {
							vm.loading = false
							uni.redirectTo({
								url: '/pages/order/order'
							})
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.submit {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
	}
</style>